<!doctype html>
<meta charset="utf-8">
<title>Number guessing game with graphics</title>

<style type="text/css">

#stage
{
  width: 300px;
  height: 33px;
	position: relative;
}

#scale
{
  width: 300px;
  height: 33px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url(../images/scale.png);
}

#arrow
{
  width: 17px;
  height: 22px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url(../images/arrow.png);
  
  /*Transition*/
  -webkit-transition: left 0.5s ease-out 0s;
  -moz-transition: left 0.5s ease-out 0s;
  transition: left 0.5s ease-out 0s;
}

</style>

<div id="stage">
  <div id="scale"></div>
  <div id="arrow"></div>
</div>

<p id="output">I am thinking of a number between 0 and 99.</p>
<input id="input" type="text" placeholder="Enter your guess…"> 
<button>guess</button>
	
<script type="text/javascript">

//Game variables
var mysteryNumber = 50;
var playersGuess = 0;
var guessesRemaining = 10;
var guessesMade = 0;
var gameState = "";
var gameWon = false;

//The input and output fields
var input = document.querySelector("#input");
var output = document.querySelector("#output");

//The button
var button = document.querySelector("button");
button.style.cursor = "pointer";
button.addEventListener("click", clickHandler, false);

//The arrow
var arrow = document.querySelector("#arrow");

function render()
{
  //Position the arrow
  //Multipy the players guess by 3 to get the
  //corrent pixel position on the scale
  arrow.style.left = playersGuess * 3 + "px";
}

function clickHandler()
{
  playGame();
}

function playGame()
{  
  guessesRemaining = guessesRemaining - 1;
  guessesMade = guessesMade + 1;
  gameState = " Guess: " + guessesMade + ", Remaining: " + guessesRemaining;
  
  playersGuess = parseInt(input.value);

  if(playersGuess > mysteryNumber)
  {
    output.innerHTML = "That's too high." + gameState;
    
    //Check for the end of the game
    if (guessesRemaining < 1)
    {
      endGame();
    }
  }
  else if(playersGuess < mysteryNumber)
  {
    output.innerHTML = "That's too low." + gameState;
    
    //Check for the end of the game
    if (guessesRemaining < 1)
    {
      endGame();
    }
  }
  else if(playersGuess === mysteryNumber)
  {
    gameWon = true;
    endGame();
  }
  
  //Update the graphic display
  render();
}

function endGame()
{
  if (gameWon)
  {
    output.innerHTML
      = "Yes, it's " + mysteryNumber + "!" + "<br>" 
      + "It only took you " + guessesMade + " guesses.";
  }
  else
  {
    output.innerHTML
      = "No more guesses left!" + "<br>" 
      + "The number was: " + mysteryNumber + ".";
  }
}

	
</script>